<template>
  <view class="app-container">
	  
	  <view v-if="loading" class="custom-loading">
	        <text>加载中...</text>
	      </view>
	  
    <!-- 主体内容 -->
    <view class="content-wrap">
      <text class="page-title">预约详情</text>
      
      <!-- 信息卡片 -->
      <view class="info-card" v-if="orderDetail">
        <view class="info-item" v-for="item in processedData" :key="item.label">
          <text class="label">{{item.label}}</text>
          <text class="value" :class="{status: item.label==='维修状态'}" :data-status="orderDetail.recordStatus">{{item.value}}</text>
        </view>
      </view>

      <!-- 车辆照片 -->
      <view class="photo-section" v-if="orderDetail">
        <text class="section-title">整车照片</text>
        <image :src="orderDetail.vehicleImage" class="full-car" mode="aspectFit" />
        
        <text class="section-title">维修部位照片</text>
        <view class="part-photos">
          <image 
            v-for="(img, index) in partImages"
            :key="index"
            :src="img"
            class="part-img"
            mode="aspectFit"
          />
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <button class="action-btn cancel" 
	@click="handleCancel"  
	v-if="orderDetail?.recordStatus === 0">取消订单</button>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const orderDetail = ref(null)
const loading = ref(true)
const orderId = ref('')
const recordId = ref('')

// 处理显示数据
const processedData = computed(() => {
  if(!orderDetail.value) return []
  
  return [
    { label: '维修单号', value: orderDetail.value.maintenanceNo },
    { label: '维修状态', value: formatStatus(orderDetail.value.recordStatus) },
    { label: '车主姓名', value: orderDetail.value.member?.memberName || '' },
    { label: '联系方式', value: orderDetail.value.member?.phone || '' },
    { label: '维修方式', value: orderDetail.value.maintenanceMethod === 0 ? '到店维修' : '上门取车' },
    { label: '取车位置', value: orderDetail.value.pickupLocation || '--' },
    { label: '预约时间', value: formatDate(orderDetail.value.appointmentDate) },
    { label: '提交时间', value: formatDate(orderDetail.value.submitDate) }
  ]
})

// 处理维修部位图片
const partImages = computed(() => {
  return [
    orderDetail.value.partImage1,
    orderDetail.value.partImage2
  ].filter(url => url)
})

// 初始化获取数据
onLoad(async (options) => {
  if(options?.id) {
    orderId.value = options.id
    await fetchOrderDetail()
  } else {
    uni.showToast({ title: '参数错误', icon: 'none' })
    uni.navigateBack()
  }
})

// 获取订单详情
const fetchOrderDetail = async () => {
  try {
    loading.value = true
	 uni.showLoading({ title: '加载中', mask: true })
    const { data: res } = await uni.request({
      url: `http://localhost:9587/repairRecord/maintenanceNo/${orderId.value}`,
      method: 'GET'
    })
    
    if(res.data) {
      orderDetail.value = res.data
	  recordId.value = res.data.recordId
    }
  } catch (error) {
    uni.showToast({ title: '数据加载失败', icon: 'none' })
  } finally {
	  uni.hideLoading()
    loading.value = false
  }
}

// 状态格式化
const formatStatus = (status) => {
  const statusMap = {
    0: '进行中',
    1: '已完成',
	2: '已取消'
  }
  return statusMap[status] || '未知状态'
}

// 日期格式化
const formatDate = (timestamp) => {
  if(!timestamp) return ''
  const date = new Date(timestamp)
  return `${date.getFullYear()}/${padZero(date.getMonth()+1)}/${padZero(date.getDate())} ${padZero(date.getHours())}:${padZero(date.getMinutes())}`
}

// 补零函数
const padZero = (n) => n.toString().padStart(2, '0')


// 取消订单
const handleCancel = async () => {
  try {
    await uni.showModal({	
      title: '确认取消',
      content: '确定要取消该订单吗？'
    }) 
	
	 uni.showLoading({ title: '处理中...' })
	   // 发送取消请求
	     const { data } = await uni.request({
	       url: `http://localhost:9587/repairRecord`,
	       method: 'PUT',  
	       header: {
	         'Authorization': `Bearer ${uni.getStorageSync('token')}`,
	         'Content-Type': 'application/json'
	       },
	       data: {
			 recordId:recordId.value,
	         recordStatus: 2  // 明确传递状态参数
	       }
	     })
    
    // await uni.request({
    //   url: `http://localhost:9587/repairRecord/${recordId.value}`,
    //   method: 'DELETE',
	   //  header: {
	   //        'Authorization': `Bearer ${uni.getStorageSync('token')}`
	   //      }
    // })
    if(data.code === 200) {
          // 更新本地状态显示
		  await fetchOrderDetail()
          uni.showToast({ title: '订单已取消' })
        }else{
			 throw new Error(data.message || '操作失败')
		}
    
    uni.showToast({ title: '取消成功' })
  } catch (error) {
    uni.showToast({ title: '取消失败', icon: 'none' })
  }finally{
	   uni.hideLoading()
  }
}
</script>


<style>
/* 精准像素级还原 */
.app-container {
  background: #F8F9FA;
  min-height: 100vh;
}

.status-bar {
  padding: 12rpx 24rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #FFFFFF;
  box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.05);
}

.page-title {
  display: block;
  font-size: 36rpx;
  font-weight: 500;
  color: #1A1A1A;
  margin: 28rpx 0;
  padding-left: 24rpx;
}

.verification-wrap {
  background: #FFF;
  margin: 0 24rpx;
  padding: 32rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.03);
}

.code-text {
  font-size: 32rpx;
  color: #333;
  letter-spacing: 1rpx;
}

.qrcode {
  width: 160rpx;
  height: 160rpx;
  border: 2rpx dashed #EEE;
}

.info-card {
  background: #FFF;
  margin: 32rpx 24rpx;
  padding: 0 24rpx;
  border-radius: 16rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28rpx 0;
  border-bottom: 1rpx solid #F5F5F5;
}

.info-item:last-child {
  border-bottom: none;
}

.label {
  color: #666;
  font-size: 28rpx;
}

.value {
  color: #333;
  font-size: 28rpx;
  
}
.value[data-status="0"] { color: #007AFF; }  /* 进行中-蓝色 */
.value[data-status="1"] { color: #09BE4F; }  /* 已完成-绿色 */
.value[data-status="2"] { color: #FF4444; }  /* 已取消-红色 */

.status {
  color: #07C160;
  background: #E8F8F0;
  padding: 6rpx 20rpx;
  border-radius: 24rpx;
}

.photo-section {
  background: #FFF;
  margin: 0 24rpx;
  padding: 24rpx;
  border-radius: 16rpx;
}

.section-title {
  display: block;
  color: #1A1A1A;
  font-size: 30rpx;
  margin: 20rpx 0;
}

.full-car {
  width: 100%;
  height: 420rpx;
  border-radius: 12rpx;
}

.part-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16rpx;
}

.part-img {
  width: 100%;
  height: 180rpx;
  border-radius: 8rpx;
  background: #F5F5F5;
}

.action-btn.cancel {
  position: fixed;
  bottom: 48rpx;
  left: 24rpx;
  right: 24rpx;
  background: #007AFF;
  color: #FFF;
  border-radius: 50rpx;
  height: 88rpx;
  font-size: 32rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,122,255,0.2);
}

.custom-loading {
  padding: 30rpx;
  text-align: center;
  color: #666;
}
</style>